<template>
    <div>
        <div class="title">
                <div class="TitleContent">标题:</div>
                <el-input
                type="text"
                placeholder="请输入内容"
                v-model="text"
                maxlength="30"
                show-word-limit
                >
                </el-input>
        </div>
        <!-- 上传图片 -->
        
            <div
            class="avatar-uploader"
            >
            <img v-if="input" :src="input" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </div>

        <div class="uploadFirstImg">
            <el-input class="urladdress" v-model="input" placeholder="请输入您想要上传的图片的URL地址"></el-input>
            <!-- <el-button size="small" type="primary">点击上传</el-button> -->
        </div>
     

        <div style="border: 1px solid #ccc;" class="PublishContent">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
            />
            <Editor
                style="height: 400px; overflow-y: hidden;"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
            />
            
        </div>
        <div class="BlogType" >
                <p>请选择博客类型:</p>
                <el-select v-model="value" filterable placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.class"
                    :value="item.id">
                    </el-option>
                </el-select>
           
        </div>
        <el-button type="primary" round @click="PublishBtn()">发布博客</el-button>
    </div>

</template>

<script>
import axios from 'axios'
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { mapState } from 'vuex'

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '<p>helllo</p>',//默认内容
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
            text: '',
            textarea: '',
            value: '',
            input: ''
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        PublishBtn(){
            let content = this.html
            var date = new Date().toLocaleDateString()
            var username = this.$store.state.username
            //创建一个新的id
            var id = this.$store.state.articleCount+this.$store.state.deleteCount+1
          
            var title = this.text
            var articleClass = this.options[this.value-1].class

            
            // 发布文章
            axios.get('http://localhost/publishArticle',
            {params:{id:id,username:username,title:title,content:content,class:articleClass,date:date,articleFirstImg:this.input}}).
            // eslint-disable-next-line no-unused-vars
            then(res=>{
                console.log(res)
                this.$message.success('发布成功')
                this.$store.commit('updateUserArticle')//更新文章
                // console.log(this.$store.state.deleteCount)
                
                    }).catch(err => {
                console.log("获取数据失败" + err);
            })

            //文章类目+1
             axios.get('http://localhost/addClassCount',
            {params:{class:articleClass}}).
            // eslint-disable-next-line no-unused-vars
            then(res=>{
               
                this.$store.commit('updateUserClass')
                
                    }).catch(err => {
                console.log("获取数据失败" + err);
            })
            
        },
 
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            // this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    },
    computed:mapState({
        options:'userclass'
    },)
})
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style scoped>
    .title{
        display: flex;
        margin: 10px 0 30px 0;
        align-items: center;
        
    }
    .TitleContent , .el-input{
        float: left;
    }
    .TitleContent{
        width: 50px
    }
    .el-input{
        width: 500px
    }
    .PublishContent{
        width: 100%;
    }
    .BlogType{
        margin: 20px 0;
        
        
    }
    .el-select{
        margin: 10px 0
    }
    
    .el-button{
        margin: 20px 0
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .uploadFirstImg{
        display: flex;
        margin: 20px 0 
    }

</style>
